<template>
    <view>
        <view class="search-box block">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索" @input="searchInput" v-model="searchText" />
        </view>
        <view class="record">
            <view> 共有{{ count }}条记录 </view>
            <view class="flex">
                <view class="record-box">
                    <poput-time display="true" :list='selectTimeList' :default="timeIndex" @cancel="onCancel" />
                </view>
                <picker :value="reportStatus" :range="selectReportStatusList" @change="onReportStatus">
                    <view class="record-box">
                        <view>{{ selectReportStatusList[reportStatus] }}</view>
                        <image class="sort-img" src="../../static/home/sort.png" />
                    </view>
                </picker>
                <picker :value="sortOrder" :range="[
                    '出险时间倒叙',
                    '出险时间正序',
                ]" @change="onSortOrder">
                    <view class="record-box">
                        <view>排序</view>
                        <image class="sort-img" src="../../static/my-client/reorder.png" />
                    </view>
                </picker>
            </view>
        </view>
        <no-data v-if="list.length === 0" />
        <view class="record-list">
            <view class="record-i" v-for="(item, index) in list" :key="index"
                @click="onGoDetails(item.id, item.insuranceType, item.companyId)">
                <view class="i-top">
                    <view
                        :class="['top-type', item.insuranceType === 2 ? '' : item.insuranceType === 3 ? 'type-yellow' : '']">
                        {{ item.insuranceType === 2 ? '日日保' : item.insuranceType === 3 ? '长期保' : '团意保' }}
                    </view>
                    <view class="top-title">
                        {{ item.companyName }}
                    </view>
                    <view class="top-account">
                        <view class="account-info account-info-active">
                            <view class="account-num">
                                <text
                                    :class="['account-unit', 'account-unit-top', item.reportStatus === 0 ? 'red-color' : '', item.reportStatus === 1 ? 'yellow-color' : '', item.reportStatus === 2 ? 'green-color' : '']">
                                    {{ reportStatusList[item.reportStatus] }}
                                </text>
                            </view>
                        </view>
                        <image v-if="item.reportStatus === 0" class="top-account-img"
                            src="../../static/home/orange-subscript.png" />
                        <image v-if="item.reportStatus === 4 || item.reportStatus === 3" class="top-account-img"
                            src="../../static/home/white-subscript.png" />
                        <image v-if="item.reportStatus === 2" class="top-account-img"
                            src="../../static/home/green-subscript.png" />
                        <image v-if="item.reportStatus === 1" class="top-account-img"
                            src="../../static/home/yellow-subscript.png" />
                    </view>
                </view>
                <view class="i-info">
                    <view class="info-row">
                        <view class="info-row-left"> 商务负责人： </view>
                        <text class="info-row-right">{{ item.saleName }}</text>
                    </view>
                    <view class="info-row">
                        <view class="info-row-left"> 被派遣单位： </view>
                        <text class="info-row-right">{{ item.serveCompanyName }}</text>
                    </view>
                    <view class="info-row">
                        <view class="info-row-left"> 出险人姓名： </view>
                        <text class="info-row-right">{{ item.outDangerUserName }}</text>
                    </view>
                    <view class="info-row">
                        <view class="info-row-left"> 出险时间： </view>
                        <text class="info-row-right">{{ item.outDangerDate }}</text>
                    </view>
                    <view class="info-row">
                        <view class="info-row-left"> 最新进展： </view>
                        <text class="info-row-right">
                            <text class="occupation-name">{{ !item.reportCaseResultList ? '' :
                                item.reportCaseResultList[0]?.remark.split(' ')[0] }} </text> {{ !item.reportCaseResultList
        ? '——' : item.reportCaseResultList[0]?.remark.split(' ')[1] }}
                        </text>
                    </view>
                </view>
                <view class="i-btn-box row" v-if="!item.isInform && item.reportStatus === 0"
                    @click.stop="onIsPoput(item.id, item.insuranceType)">
                    <view></view>
                    <view class="inform-btn">
                        销售已告知
                    </view>
                </view>
            </view>
        </view>
        <popup v-if="isPopup" title="案件跟进" @cancel="onCancelPopup" cancel>
            <view class="popup-box">
                <view class="title">
                    是否确定您已跟客户进行过对接，并告知其所需要提交的资料？
                </view>
                <view class="textareabox">
                    <textarea class="iptariea" id="" @input="changeipttext" v-model="iptremark" placeholder="请概述案件情况"
                        maxlength="100"></textarea>
                    <span class="shenyu">{{ iptlen }}/100</span>
                </view>
                <view class="btn-box row">
                    <button class="short-btn white" @click="onCancelPopup">取消</button>
                    <button class="short-btn blue" @click="onDetermine">确定</button>
                </view>
            </view>
        </popup>
    </view>
</template>
<script setup lang="ts">
import { onReachBottom, onShow } from '@dcloudio/uni-app'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { getReport, GetReportDto, longInsureBalance, saleNotice } from '@/api/reminder'
import noData from '@/components/no-data/no-data.vue'
import popup from '@/components/popup/popup.vue'
import user from '@/utils/user'
const props = defineProps(['tabIndex'])
const searchText = ref('')
const sortOrder = ref(0)
const reportStatus = ref(0)
const selectReportStatusList = ref(['全部状态', '待受理', '处理中', '已结案', '已驳回', '已撤销'])
const list = ref([] as GetReportDto[])
const hasNextPage = ref(true)
const pageNum = ref(1)
const count = ref(0)
const selectTimeList = ref(['本月', '上月'])
const reportStatusList = ref(['待受理', '处理中', '已结案', '已驳回', '已撤销'])
const timeIndex = ref(0)
const itemRange = ref('' as string | undefined)
const isPopup = ref(false)
const caseId = ref()
const typeId = ref()
const iptlen = ref(0)
const changeipttext = () => {
    if (iptremark.value.length >= 100) {
        uni.showToast({
            title: "最多输入100个字",
            icon: "none"
        })
    }
    iptlen.value = iptremark.value.length
}
const iptremark = ref('')
const onGoDetails = (id: number, type: number, companyId: number) => {
    console.log(id, type, '点击跳转')
    let ctype = null
    if (type === 6) {
        ctype = 2
    }
    else {
        ctype = type
    }
    uni.navigateTo({
        url: '/pages/report-detail/index?id=' + id + '&type=' + ctype + '&cid=' + companyId
    })
}
const onCancel = async (index: { index: number, time: undefined | string }) => {
    timeIndex.value = Number(index.index)
    itemRange.value = index.time
    await searchInput()
    console.log(timeIndex.value, itemRange.value, '父组件')
}
const onSortOrder = (index: { detail: { value: number } }) => {
    sortOrder.value = index.detail.value
    searchInput()
}
const onReportStatus = (index: { detail: { value: number } }) => {
    reportStatus.value = index.detail.value
    searchInput()
}
const loadingflag = ref(false)
onMounted(() => {
    loadingflag.value = true
})
onBeforeUnmount(() => {
    loadingflag.value = false
})
// 到达底部
onReachBottom(() => {
    console.log('报案处理', props.tabIndex)
    if (loadingflag.value) {
        if (props.tabIndex === 0) {
            if (!hasNextPage.value) {
                return
            }
            pageNum.value += 1
            getReportList()
        }
    }
})
const searchInput = () => {
    list.value = []
    pageNum.value = 1
    hasNextPage.value = true
    getReportList()
}
const getReportList = async () => {
    const result = await getReport({
        pageNum: pageNum.value,
        pageSize: 50,
        companyName: searchText.value,
        queryMonth: timeIndex.value > 800 ? '' : timeIndex.value,
        startTime: timeIndex.value > 800 ? itemRange.value?.split(' 至 ')[0] : '',
        endTime: timeIndex.value > 800 ? itemRange.value?.split(' 至 ')[1] : '',
        reportStatus: Number(reportStatus.value) === 0 ? '' : (reportStatus.value - 1),
        sortOrder: sortOrder.value
    })
    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    const arr = []
    arr.push(...list.value)
    arr.push(...result.list)
    list.value = arr
    count.value = (result.totalCount)
    console.log(result, 'result')
}
// 开启弹窗
const onIsPoput = async (id: number, type: number) => {
    console.log(id, type)
    caseId.value = id
    typeId.value = type
    isPopup.value = true
}
// 弹窗关闭回调
const onCancelPopup = () => {
    isPopup.value = false
    iptremark.value = ''
    iptlen.value = 0
}
// 弹窗点击确定
const onDetermine = async () => {
    if (iptremark.value.trim().length === 0) {
        uni.showToast({
            title: '备注不能为空',
            icon: 'none'
        })
        return
    }
    await saleNotice({
        id: caseId.value,
        insuranceType: typeId.value,
        remark: iptremark.value
    }).then(() => {
        onCancelPopup()
    })
    searchInput()
    uni.showToast({
        title: '通知成功',
        icon: 'none'
    })
    // 调用接口
}
const onClose = () => {
    console.log('点击啦')
}
onMounted(async () => {
    await user.waitLogin()
    getReportList()
})

</script>
<style lang="scss" scoped>
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;

    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }

    .i-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1rpx solid #f4f4f7;
        padding-bottom: 30rpx;
    }

    .top-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 42rpx;
        width: 750rpx;
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .top-type {
        padding: 6rpx 15rpx;
        font-size: 24rpx;
        background-color: #00D679;
        border-radius: 30rpx;
        flex: none;
        color: #ffffff;
        margin-right: 16rpx;
    }

    .type-yellow {
        background-color: #FFA814;
    }

    .top-account {
        position: relative;
        width: 200rpx;
        color: #ff7642;
    }

    .account-num {
        font-size: $font-large;
        font-weight: bold;
        display: flex;
        align-items: baseline;
        text-align: right;
        justify-content: flex-end;

        .red-color {
            color: #FF7642;
        }

        .yellow-color {
            color: #FFA814;
        }

        .green-color {
            color: #00D679;
        }
    }

    .account-unit {
        font-size: $font-small;
    }

    .account-unit-top {
        margin-top: 25rpx;
        font-size: $font-base;
    }

    .account-balance {
        text-align: right;
        color: $font-small;
    }

    .account-info {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }

    .account-info-active {
        color: #9497b1 !important;
    }

    .top-account-img {
        position: absolute;
        width: 72rpx;
        height: 72rpx;
        top: 0;
        right: 0;
        z-index: 0;
    }

    .i-info {
        margin-top: 30rpx;
    }

    .info-row {
        display: flex;
    }

    .info-row-left {
        flex-shrink: 0;
        width: 181rpx;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }

    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;
}

.tab-radius {
    padding: 0rpx 30rpx;
}

.sort-img {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
}

.record-box {
    @include flex-between;
    color: #565868;
    font-size: $font-normal;
    margin-left: 34rpx;
}

.i-btn-box {
    margin-top: 15rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #F4F4F7;

    .inform-btn {
        border: 1rpx solid #DEE0E3;
        border-radius: 50rpx;
        padding: 0rpx 25rpx;
        font-size: $font-base;
        text-align: center;
        line-height: 58rpx;
        font-weight: normal;
    }
}

.popup-box {
    padding: 0 32rpx;
    box-sizing: border-box;

    .title {
        color: #565868;
        font-size: $font-medium;
    }
}

.btn-box {
    margin-top: 40rpx;
}

.occupation-name {
    color: #3E5FF5;
    font-size: 28rpx;
}

.iptariea {
    width: auto;
    padding: 24rpx;
    font-size: 28rpx;
    background-color: #F4F4F7;
    border-radius: 16rpx;
    margin-top: 24rpx;
}

.textareabox {
    box-sizing: border-box;
    min-height: 100rpx;
    position: relative;

    .shenyu {
        position: absolute;
        bottom: 10rpx;
        right: 20rpx;
    }
}
</style>
